<template>
  <div>
    <el-button @click="goBack" type="primary" style="margin-top: 10px; margin-left: 20px;">返回</el-button>
    <page-main>
      <h2>巡查点详情</h2>
      <el-timeline>
        <el-timeline-item
          v-for="(item, index) in pointInfoList"
          :key="index"
          :timestamp="$getDateTime(item.add_time) + '   ' + item.result"
          placement="top"
        >
          <div>
            <el-descriptions :column="3" border>
              <el-descriptions-item
                label="ID"
                label-align="right"
                align="center"
                label-class-name="my-label"
                class-name="my-content"
                width="150px"
                >{{ item.id || '' }}</el-descriptions-item
              ><el-descriptions-item
                label="点位名称"
                label-align="right"
                align="center"
                label-class-name="my-label"
                class-name="my-content"
                width="150px"
                >{{ item.point_name || '' }}</el-descriptions-item
              >
              <el-descriptions-item
                label="社会单位名称"
                label-align="right"
                align="center"
                label-class-name="my-label"
                class-name="my-content"
                width="150px"
                >{{ item.unit_full_name || '' }}</el-descriptions-item
              >
              <el-descriptions-item
                label="是否有隐患"
                label-align="right"
                align="center"
                label-class-name="my-label"
                class-name="my-content"
                width="150px"
              >
                <el-button type="warning" v-if="item.danger_id" @click="gotodetails(item.danger_id)"
                  >隐患详情</el-button
                >
                <span v-else>否</span></el-descriptions-item
              >
              <el-descriptions-item
                label="巡查图片"
                label-align="right"
                align="center"
                label-class-name="my-label"
                class-name="my-content"
                width="150px"
              >
                <el-image
                  style="width: 150px; height: 150px; margin-right: 20px;"
                  :src="upDataUrl + '' + imgItem"
                  v-for="(imgItem, imgIndex) in item.images"
                  :key="imgIndex"
                  :preview-src-list="[upDataUrl + imgItem]"
                >
                </el-image>
              </el-descriptions-item>
              <el-descriptions-item
                label="巡查视频"
                label-align="right"
                align="center"
                label-class-name="my-label"
                class-name="my-content"
                width="150px"
              >
                <video
                  style="width: 150px; height: 150px; margin-right: 20px;"
                  :src="upDataUrl + '' + videoItem"
                  v-for="(videoItem, videoIndex) in item.video"
                  :key="videoIndex"
                ></video>
              </el-descriptions-item>
            </el-descriptions>
          </div>
          <div style="margin-top: 20px;">
            <!-- <el-tree :data="data" :props="{ class: customNodeClass }" default-expand-all /> -->

            <el-tree :data="item.question_text" node-key="id" default-expand-all :props="customNodeClass">
              <template #default="{ node, data }">
                <span class="custom-tree-node">
                  <span :class="data.is_right == 0 ? 'green' : ''">{{ node.label }}</span>
                </span>
              </template>
            </el-tree>
          </div>
        </el-timeline-item>
      </el-timeline>
    </page-main>
  </div>
</template>

<script>
export default {
  props: ['detailInfoObj'],
  data() {
    return {
      data: [
        {
          id: 1,
          label: 'Level one 1',
          children: [
            {
              id: 4,
              label: 'Level two 1-1',
              isPenultimate: true,
              children: [
                {
                  id: 9,
                  label: 'Level three 1-1-1'
                },
                {
                  id: 10,
                  label: 'Level three 1-1-2'
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: 'Level one 2',
          isPenultimate: true,
          children: [
            {
              id: 5,
              label: 'Level two 2-1'
            },
            {
              id: 6,
              label: 'Level two 2-2'
            }
          ]
        },
        {
          id: 3,
          label: 'Level one 3',
          isPenultimate: true,
          children: [
            {
              id: 7,
              label: 'Level two 3-1'
            },
            {
              id: 8,
              label: 'Level two 3-2'
            }
          ]
        }
      ],
      pointInfoList: [],
      upDataUrl: import.meta.env.DEV ? '/proxy/' : import.meta.env.VITE_APP_API_BASEURL,
      customNodeClass: {
        children: 'child',
        label: 'name'
      }
    }
  },
  created() {
    this.getDetailInfo()
    // this.customNodeClass();
  },
  mounted() {},
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    gotodetails(e) {
      this.$router.push({
        name: 'hiddenDangerRecord',
        query: {
          id: e
        }
      })
      console.log(e)
    },
    getNode(data) {
      console.log(data)
    },
    test() {
      let div = document.querySelectorAll('.el-timeline-item__timestamp')
      this.pointInfoList.map((item, index) => {
        console.log(item, index)
        if (item.result == '合格') {
          div[index].style.color = 'green'
        }
        if (item.result == '不合格') {
          div[index].style.color = 'red'
        }
      })
    },

    getDetailInfo() {
      let data = ''
      if (Object.keys(this.$route.query).length) {
        data = this.$route.query
      } else {
        data = this.detailInfoObj
      }
      this.$api.post('/unit/PatrolInfo/record', data).then((res) => {
        let temp = res.data.lists
        if (temp.length) {
          temp.map((curVal) => {
            curVal?.question_text?.forEach((cur) => {
              cur.child.map((val) => {
                val.child.map((item) => {
                  let checkedVal = item.value
                  item.child.map((itemVal, index) => {
                    if (itemVal.id != checkedVal) {
                      item.child.splice(index, 1)
                    }
                  })
                })
              })
            })
          })
        }
        this.pointInfoList = temp

        this.$nextTick(() => {
          this.test()
        })
      })
    }
  }
}
</script>

<style>
.is-penultimate > .el-tree-node__content {
    color: #626aef;
}
.el-tree-node.is-expanded.is-penultimate > .el-tree-node__children {
    display: flex;
    flex-direction: row;
}
.is-penultimate > .el-tree-node__children > div {
    width: 25%;
}
.green {
    color: red;
}
</style>
